<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>管理定区/调度排班</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/css/default.css">	
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script>
<script
	src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"
	type="text/javascript"></script>

</head>
<body class="easyui-layout" style="visibility:hidden;">
	<div region="center" border="false">
    	<table id="grid"></table>
	</div>
	<div region="south" border="false" style="height:150px">
		<div id="tabs" fit="true" class="easyui-tabs">
			<div title="关联分区" id="subArea"
				style="width:100%;height:100%;overflow:hidden">
				<table id="association_subarea"></table>
			</div>	
			<div title="关联客户" id="customers"
				style="width:100%;height:100%;overflow:hidden">
				<table id="association_customer"></table>
			</div>	
		</div>
	</div>
	
	<!-- 添加 修改分区 -->
	<div class="easyui-window" title="定区添加修改" id="addDecidedzoneWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div style="height:31px;overflow:hidden;" split="false" border="false" >
			<div class="datagrid-toolbar">
				<a id="decidedzone_save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a>
			</div>
		</div>
		
		<div style="overflow:auto;padding:5px;" border="false">
			<form id="decidedzone_form">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">定区信息</td>
					</tr>
					<%--<tr>
						<td>定区编码</td>
						<td><input type="text" name="id" class="easyui-validatebox" required="true"/></td>
					</tr>--%>
					<tr>
						<td>定区名称</td>
						<td><input type="text" name="name" class="easyui-validatebox" required="true" validType="remote['${pageContext.request.contextPath}/bcDecidedzone/isExistsName.action','name']" /></td>
					</tr>
					<tr>
						<td >选择负责人</td>
						<td>
							<input class="easyui-combobox" name="staffId"
    							data-options="valueField:'id',textField:'name',url:'${pageContext.request.contextPath}/bcStaff/findListWithoutDel.action'" />
						</td>
					</tr>
					<tr height="300">
						<td valign="top" >关联分区</td>
						<td>
							<%--
							TODO 关联分区url 显示没有decidedzone 的分区数据
							--%>
							<table id="subareaGrid"  class="easyui-datagrid" border="false" style="width:400px;height:200px" data-options="url:'${pageContext.request.contextPath}/bcSubarea/findListWithoutDecidedId.action',fitColumns:true,singleSelect:false">
								<thead>  
							        <tr>  
							            <th data-options="field:'idsss',width:30,checkbox:true,formatter:function(value,row,index){return row.id;}">编号</th>
							            <th data-options="field:'addresskey',width:150">关键字</th>  
							            <th data-options="field:'position',width:200,align:'right'">位置</th>
							        </tr>  
							    </thead> 
							</table>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>

	<!--  修改分区 -->
	<div class="easyui-window" title="定区修改" id="upDecidedzoneWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div style="height:31px;overflow:hidden;" split="false" border="false" >
			<div class="datagrid-toolbar">
				<a id="decidedzone_up" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >修改</a>
			</div>
		</div>

		<div style="overflow:auto;padding:5px;" border="false">
			<form id="decidedzoneup_form">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">定区信息</td>
					</tr>
					<tr style="display: none">
						<td>定区编码</td>
						<td><input type="text" name="id"/></td>
					</tr>
					<tr>
						<td>定区名称</td>
						<td><input type="text" name="name" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td >选择负责人</td>
						<td>
							<input class="easyui-combobox" name="staffId"  id="selPersonUp"
								   />
						</td>
					</tr>
					<tr height="300">
						<td valign="top" >关联分区</td>
						<td>
							<%--
							TODO 关联分区url 显示没有decidedzone 的分区数据
							--%>
							<table id="subareaGridUp"  class="easyui-datagrid" border="false" style="width:400px;height:200px">
								<thead>
								<tr>
									<th data-options="field:'idssss',width:30,checkbox:true,formatter:function(value,row,index){return row.id;}">编号</th>
									<th data-options="field:'addresskey',width:150">关键字</th>
									<th data-options="field:'position',width:200,align:'right'">位置</th>
								</tr>
								</thead>
							</table>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>


	<!-- 查询定区 -->
	<div class="easyui-window" title="查询定区窗口" id="searchWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div style="overflow:auto;padding:5px;" border="false">
			<form>
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">查询条件</td>
					</tr>
					<tr>
						<td>定区编码</td>
						<td><input type="text" name="id" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td>所属单位</td>
						<td><input type="text" name="staff.station" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td colspan="2"><a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> </td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	
	<!-- 关联客户窗口 -->
	<div class="easyui-window" title="关联客户窗口" id="customerWindow"  collapsible="false" closed="true" minimizable="false" maximizable="false" style="top:20px;left:200px;width: 400px;height: 300px;">
		<div style="overflow:auto;padding:5px;" border="false">
			<form id="customerForm">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="3">关联客户</td>
					</tr>
					<tr>
						<td>
							<input type="hidden" name="id" id="customerDecidedZoneId" />
							<select id="noassociationSelect"   multiple="multiple" size="10"></select>
						</td>
						<td>
							<input type="button" value="》》" id="toRight"><br/>
							<input type="button" value="《《" id="toLeft">
						</td>
						<td>
							<select id="associationSelect" name="customerIds" multiple="multiple" size="10"></select>
						</td>
					</tr>
					<tr>
						<td colspan="3"><a id="associationBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">关联客户</a> </td>
					</tr>
				</table>
			</form>
		</div>
	</div>


	<script type="text/javascript">



		function doAdd(){
			$('#addDecidedzoneWindow').window("open");

			//清除选中的数据
            $("#decidedzone_form").form('clear');

            //重新加载
            $("#subareaGrid").datagrid('reload')
		}

		function doEdit(){



		    //判断选中的复选框是否为1个

            var datagrid = $("#grid").datagrid('getSelections');


            if (datagrid.length==1){

                var ids=[];
                for (var i=0;i<datagrid.length;i++){
                    ids.push(datagrid[i].id)
                }

                var sids = ids.join(",");

                $("#selPersonUp").combobox({
                    valueField:'id',
                    textField:'name',
                    url:'${pageContext.request.contextPath}/bcStaff/findListWithoutDel.action?id='+sids
                });


                $("#subareaGridUp").datagrid(
                    {
                        url:'${pageContext.request.contextPath}/bcSubarea/findListWithoutDecidedId.action?id='+sids,
                        fitColumns:true,singleSelect:false
                    }
                );


                $.ajax({
                    url:'${pageContext.request.contextPath}/bcDecidedzone/upDecideZoneById.action',
                    type:'POST',
                    data:{id:sids},
                    dataType:'json',
                    success:function (obj) {


                        $("#upDecidedzoneWindow").window('open');

                        $("#decidedzoneup_form").form('load',obj);

                        //选中￥
                        $("#subareaGridUp").datagrid({
                            onLoadSuccess:function (row) {
                                var rowData = row.rows;

                                $.each(rowData,function (inx,val) {

                                    for (var j=0;j<obj.bcSubareas.length;j++){


                                        if (obj.bcSubareas[j].id==val.id){


                                            $("#subareaGridUp").datagrid('selectRow',inx)
                                        }

                                    }
                                })

                            }
                        })

                    }
                })





            } else{


                $.messager.alert('提示','你没有选中一个复选框或选中多个复选框','info')

            }


		}

		function doDelete(){


			//判断是否选中

			var datagrid = $("#grid").datagrid('getSelections');


			if (datagrid.length>0){

				var ids=[];
				for (var i=0;i<datagrid.length;i++){
					ids.push(datagrid[i].id)
				}

				var sids = ids.join(",");

				$.ajax({
					url:'${pageContext.request.contextPath}/bcDecidedzone/delDecidedByIds.action',
					type:'POST',
					data:{ids:sids},
					dataType:'json',
					success:function (obj) {

						if (obj.success){

							$.messager.show({
								title:'消息提示',
								msg:'删除成功',
								timeout:1000,
								showType:'slide'
							});

							//刷新表格
							$("#grid").datagrid('reload')


						}else{

							$.messager.show({
								title:'消息提示',
								msg:'删除失败',
								timeout:1000,
								showType:'slide'
							});

						}


					}
				})



			} else{

				$.messager.alert('提示','请选中至少一个复选框','info')

			}



		}

		function doSearch(){
			$('#searchWindow').window("open");
		}


		function doAssociations(){

			var datagrid = $("#grid").datagrid('getSelections');

			if (datagrid.length==1){

				//得到定区Id
				var id = datagrid[0].id;

				$('#customerWindow').window('open');


				$("#associationSelect").empty();


				$("#noassociationSelect").empty();


				//显示没有安排定区的客户

				$.ajax({
					url:'${pageContext.request.contextPath}/bcDecidedzone/findNoSelCustomer.action',
					type:'POST',
					dataType:'json',
					success:function (obj) {

						for (var i=0;i<obj.length;i++){
							$("#noassociationSelect").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>")
						}
					}

				});


				//显示当前定区下已经安排的客户

				$.ajax({
					url:'${pageContext.request.contextPath}/bcDecidedzone/findSelectCustomer.action',
					type:'POST',
					data:{id:id},
					dataType:'json',
					success:function (o) {

						for (var i=0;i<o.length;i++){

							$("#associationSelect").append("<option value='"+o[i].id+"'>"+o[i].name+"</option>")

						}
					}
				})

			} else{
				$.messager.alert('提示','没有选中或选中了多行',"info")
			}

		}

		//点击关联客户
		$("#associationBtn").click(function () {



			  //设置 右边的为选中状态
			$("#associationSelect option").attr('selected',true);

			$("#customerDecidedZoneId").val($("#grid").datagrid('getSelections')[0].id);



			$.ajax({
				url:'${pageContext.request.contextPath}/bcDecidedzone/upCustomer.action',
				type:'POST',
				data:$("#customerForm").serialize(),
				dataType:'json',
				success:function (obj) {

					if (obj.success){


						//提示成功

						$.messager.show({
							title:'消息提示',
							msg:'关联成功',
							timeout:1000,
							showType:'slide'
						});


						//清除select里边的数据

						$("#associationSelect").empty();


						$("#noassociationSelect").empty();

						//关闭窗口
						$("#customerWindow").window('close')
					}

				}
			})

		});


		//点击右移
		$("#toRight").click(function () {

			//得到左边选中的全
			$("#noassociationSelect option:selected").appendTo($("#associationSelect"))

		});

		//左移
		$("#toLeft").click(function () {

			$("#associationSelect option:selected").appendTo($("#noassociationSelect"))

		});


		//工具栏
		var toolbar = [ {
			id : 'button-search',
			text : '查询',
			iconCls : 'icon-search',
			handler : doSearch
		}, {
			id : 'button-add',
			text : '增加',
			iconCls : 'icon-add',
			handler : doAdd
		}, {
			id : 'button-edit',
			text : '修改',
			iconCls : 'icon-edit',
			handler : doEdit
		},{
			id : 'button-delete',
			text : '删除',
			iconCls : 'icon-cancel',
			handler : doDelete
		},{
			id : 'button-association',
			text : '关联客户',
			iconCls : 'icon-sum',
			handler : doAssociations
		}];
		// 定义列
		var columns = [ [
            {
                field : 'ids',
                title : '定区编号',
                width : 120,
                checkbox:true,
                align : 'center',
				formatter:function (data, row, index) {
                	return row.id
				}
            },
            {
			field : 'id',
			title : '定区编号',
			align : 'center'
		},{
			field : 'name',
			title : '定区名称',
			width : 120,
			align : 'center'
		}, {
			field : 'staff.name',
			title : '负责人',
			width : 120,
			align : 'center',
			formatter : function(data,row ,index){
				return row.staff.name;
			}
		}, {
			field : 'staff.telephone',
			title : '联系电话',
			width : 120,
			align : 'center',
			formatter : function(data,row ,index){
				return row.staff.telephone;
			}
		}, {
			field : 'staff.station',
			title : '所属公司',
			width : 120,
			align : 'center',
			formatter : function(data,row ,index){
				return row.staff.station;
			}
		} ] ];





		$(function(){




			// //修改
			$("#decidedzone_up").click(function(){


				// alert('修改')

				//判断信息是否填写完整
				if ($("#decidedzoneup_form").form('validate')){


					//进行数据校验 省略...
					//获取选中的subarea id
					var ids=$("#subareaGridUp").datagrid("getSelections");
					if(ids.length<1){
						alert("请选择修改关联的区域");
					}else{

						var suareaIds=new Array();
						for (var i=0;i<ids.length;i++){
							suareaIds.push(ids[i].id)
						}
						var sIds=suareaIds.join(",");

						$.ajax({
							url:"${pageContext.request.contextPath }/bcDecidedzone/saveWithBcSubarea.action",
							type:"post",
							data:$("#decidedzoneup_form").serialize()+"&ids="+sIds,
							dataType:"json",
							success:function(obj){
								if (obj.success){

									$.messager.show({
										title:'消息提示',
										msg:'修改成功',
										timeout:1000,
										showType:'slide'
									})

								}else{

									$.messager.show({
										title:'消息提示',
										msg:'修改失败',
										timeout:1000,
										showType:'slide'
									})
								}
								//重新加载表格
								$("#grid").datagrid("reload");

								//关闭窗口
								$("#upDecidedzoneWindow").window('close')

							}
						});

					}


				}else{

					$.messager.alert('提示','请输入完整的信息','info')

				}

			 });


			//保存
			$("#decidedzone_save").click(function(){

				if ($("#decidedzone_form").form('validate')){
					//进行数据校验 省略...
					//获取选中的subarea id
					var ids=$("#subareaGrid").datagrid("getSelections");
					if(ids.length<1){
						alert("请选择关联的区域");
					}else{

						var suareaIds=new Array();
						for (var i=0;i<ids.length;i++){
							suareaIds.push(ids[i].id)
						}
						var sIds=suareaIds.join(",");
						//console.log($("#decidedzone_form").serialize());
						$.ajax({
							url:"${pageContext.request.contextPath }/bcDecidedzone/saveWithBcSubarea.action",
							type:"post",
							data:$("#decidedzone_form").serialize()+"&ids="+sIds,
							dataType:"json",
							success:function(obj){
								if (obj.success){

									$.messager.show({
										title:'消息提示',
										msg:'添加成功',
										timeout:1000,
										showType:'slide'
									})

								}else{

									$.messager.show({
										title:'消息提示',
										msg:'添加失败',
										timeout:1000,
										showType:'slide'
									})

								}

								//重新加载表格
								$("#grid").datagrid("reload");

								//关闭窗口
								$("#addDecidedzoneWindow").window('close')


							}
						});
					}
				}else{

					$.messager.alert("提示",'请输入完整信息',"error");

				}


			});



			// 先将body隐藏，再显示，不会出现页面刷新效果
			$("body").css({visibility:"visible"});

			// 收派标准数据表格
			$('#grid').datagrid( {
				iconCls : 'icon-forward',
				fit : true,
				border : true,
				rownumbers : true,
				striped : true,
				pageList: [10,30,50,100],
				pagination : true,
				toolbar : toolbar,
				url : "${pageContext.request.contextPath}/bcDecidedzone/findPage.action",
				idField : 'id',
				columns : columns,
				onDblClickRow : doDblClickRow
			});

			// 添加、修改定区
			$('#addDecidedzoneWindow').window({
				title: '添加修改定区',
				width: 600,
				modal: true,
				shadow: true,
				closed: true,
				height: 400,
				resizable:false
			});

			// 修改定区
			$('#upDecidedzoneWindow').window({
				title: '添加修改定区',
				width: 600,
				modal: true,
				shadow: true,
				closed: true,
				height: 400,
				resizable:false
			});

			// 查询定区
			$('#searchWindow').window({
				title: '查询定区',
				width: 400,
				modal: true,
				shadow: true,
				closed: true,
				height: 400,
				resizable:false
			});
			$("#btn").click(function(){
				alert("执行查询...");
			});

		});

		function doDblClickRow(rowIndex, rowData){

            $("#selPersonUp").combobox({
                valueField:'id',
                textField:'name',
                url:'${pageContext.request.contextPath}/bcStaff/findListWithoutDel.action?id='+rowData.id
            });


            $("#subareaGridUp").datagrid(
                {
                    url:'${pageContext.request.contextPath}/bcSubarea/findListWithoutDecidedId.action?id='+rowData.id,
                    fitColumns:true,singleSelect:false
                }
            );


            $.ajax({
                url:'${pageContext.request.contextPath}/bcDecidedzone/upDecideZoneById.action',
                type:'POST',
                data:{id:rowData.id},
                dataType:'json',
                success:function (obj) {


                    $("#upDecidedzoneWindow").window('open');

                    $("#decidedzoneup_form").form('load',obj);

                    //选中￥
                    $("#subareaGridUp").datagrid({
                        onLoadSuccess:function (row) {
                            var rowData = row.rows;

                            $.each(rowData,function (inx,val) {

                                for (var j=0;j<obj.bcSubareas.length;j++){


                                    if (obj.bcSubareas[j].id==val.id){


                                        $("#subareaGridUp").datagrid('selectRow',inx)
                                    }

                                }
                            })

                        }
                    })

                }
            })

		}
	</script>
</body>
</html>